<template>
  <div class="profile">
    <p-header></p-header>
    <div class="content">
      <item1></item1>
      <item2></item2>
    </div>
    <button class="logout" @click="logout">
      <span>退出登录</span>
    </button>
  </div>
</template>

<script>
import PHeader from "components/private/profile/Header";
import Item1 from "components/private/profile/Item1";
import Item2 from "components/private/profile/Item2";
export default {
  name: "Profile",
  data(){
    return {
      
    }
  },
  components: {
    PHeader,
    Item1,
    Item2
  },
  computed: {
    
  },
  methods: {
    logout() {
      localStorage.removeItem('uid');
      this.$store.commit('updateUserId', localStorage.getItem('uid'));
      this.$bus.$emit('logout')
      if(this.$store.state.uid==null){
        this.$router.replace('/login')
      }
      
    }
  },
  created(){
    // 改变vuex，这样才能在computed中得到this.$store
    this.$store.dispatch("updateUser");
    
    
    
    
  }
};
</script>

<style lang="less" scoped>
.profile {
  background: url("https://s10.mogucdn.com/mlcdn/c45406/190819_1j85g48lc84kk8deg00f66fk53dlc_750x229.png")
    no-repeat;
  background-size: 100%;
  background-color: #fff;
  overflow: hidden;
  .content {
    font-size: 12px;
    background-color: #ccc;
  }
  .logout {
    margin-top: 50px;
    width: 100%;
    height: 40px;
    border-radius: 40px;
    outline: none;
    border: none;
    background-color: rosybrown;
    color: #fff;
  }
}
</style>